<template>
    <div>
        <h3>展商详情</h3>
        <div>
            <el-form
                    :rules="loginRules"
                    ref="form" :model="form" label-width="120px">

                <el-form-item label="id" prop="id" disabled="true">
                    <el-input v-model="form.id" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="companyId" prop="companyId" disabled="false">
                    <el-input v-model="form.companyId" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="projectId" prop="projectId" disabled="false">
                    <el-input v-model="form.projectId" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="boothNumber" prop="boothNumber" disabled="false">
                    <el-input v-model="form.boothNumber" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="userName" prop="userName" disabled="false">
                    <el-input v-model="form.userName" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="password" prop="password" disabled="false">
                    <el-input v-model="form.password" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="website" prop="website" disabled="false">
                    <el-input v-model="form.website" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="accountName" prop="accountName" disabled="false">
                    <el-input v-model="form.accountName" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="company" prop="company" disabled="false">
                    <el-input v-model="form.company" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="companyEn" prop="companyEn" disabled="false">
                    <el-input v-model="form.companyEn" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="contact" prop="contact" disabled="false">
                    <el-input v-model="form.contact" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="contactEn" prop="contactEn" disabled="false">
                    <el-input v-model="form.contactEn" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="job" prop="job" disabled="false">
                    <el-input v-model="form.job" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="jobEn" prop="jobEn" disabled="false">
                    <el-input v-model="form.jobEn" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="portrait" prop="portrait" disabled="false">
                    <el-input v-model="form.portrait" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="email" prop="email" disabled="false">
                    <el-input v-model="form.email" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="phone" prop="phone" disabled="false">
                    <el-input v-model="form.phone" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="mobilePhone" prop="mobilePhone" disabled="false">
                    <el-input v-model="form.mobilePhone" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="tags" prop="tags" disabled="false">
                    <el-input v-model="form.tags" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="country" prop="country" disabled="false">
                    <el-input v-model="form.country" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="province" prop="province" disabled="false">
                    <el-input v-model="form.province" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="city" prop="city" disabled="false">
                    <el-input v-model="form.city" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="creator" prop="creator" disabled="false">
                    <el-input v-model="form.creator" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="mendor" prop="mendor" disabled="false">
                    <el-input v-model="form.mendor" :disabled="false"></el-input>
                </el-form-item>

                <!--   <el-form-item label="updateTime" prop="updateTime" disabled="false">
                       <el-input v-model="form.updateTime" :disabled="false"></el-input>
                   </el-form-item>-->

                <!--     <el-form-item label="createTime" prop="createTime" disabled="false">
                         <el-input v-model="form.createTime" :disabled="false"></el-input>
                     </el-form-item>-->

                <el-form-item label="status" prop="status" disabled="false">
                    <el-input v-model="form.status" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="remark" prop="remark" disabled="false">
                    <el-input v-model="form.remark" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="hallNumber" prop="hallNumber" disabled="false">
                    <el-input v-model="form.hallNumber" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="industry" prop="industry" disabled="false">
                    <el-input v-model="form.industry" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="nature" prop="nature" disabled="false">
                    <el-input v-model="form.nature" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="introduction" prop="introduction" disabled="false">
                    <el-input v-model="form.introduction" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="confirmCode" prop="confirmCode" disabled="false">
                    <el-input v-model="form.confirmCode" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="popular" prop="popular" disabled="false">
                    <el-input v-model="form.popular" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="expo" prop="expo" disabled="false">
                    <el-input v-model="form.expo" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="cpc" prop="cpc" disabled="false">
                    <el-input v-model="form.cpc" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="acode" prop="acode" disabled="false">
                    <el-input v-model="form.acode" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="video" prop="video" disabled="false">
                    <el-input v-model="form.video" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="url" prop="url" disabled="false">
                    <el-input v-model="form.url" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="videoPopular" prop="videoPopular" disabled="false">
                    <el-input v-model="form.videoPopular" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="introductionEn" prop="introductionEn" disabled="false">
                    <el-input v-model="form.introductionEn" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="companyAddress" prop="companyAddress" disabled="false">
                    <el-input v-model="form.companyAddress" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="companyAddressEn" prop="companyAddressEn" disabled="false">
                    <el-input v-model="form.companyAddressEn" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="agree" prop="agree" disabled="false">
                    <el-input v-model="form.agree" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="onlineExpireTime" prop="onlineExpireTime" disabled="false">
                    <el-date-picker
                            v-model="form.onlineExpireTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="collect" prop="collect" disabled="false">
                    <el-input v-model="form.collect" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="likes" prop="likes" disabled="false">
                    <el-input v-model="form.likes" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="beCollect" prop="beCollect" disabled="false">
                    <el-input v-model="form.beCollect" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="beLikes" prop="beLikes" disabled="false">
                    <el-input v-model="form.beLikes" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="top" prop="top" disabled="false">
                    <el-input v-model="form.top" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="synTopExhibit" prop="synTopExhibit" disabled="false">
                    <el-input v-model="form.synTopExhibit" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="addTime" prop="addTime" disabled="false">
                    <el-date-picker
                            v-model="form.addTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="topOrderBy" prop="topOrderBy" disabled="false">
                    <el-input v-model="form.topOrderBy" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="collectDemand" prop="collectDemand" disabled="false">
                    <el-input v-model="form.collectDemand" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="collectPurchaser" prop="collectPurchaser" disabled="false">
                    <el-input v-model="form.collectPurchaser" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="likesDemand" prop="likesDemand" disabled="false">
                    <el-input v-model="form.likesDemand" :disabled="false"></el-input>
                </el-form-item>

                <el-form-item label="likesPurchaser" prop="likesPurchaser" disabled="false">
                    <el-input v-model="form.likesPurchaser" :disabled="false"></el-input>
                </el-form-item>


            </el-form>
        </div>
        <h3>自定义字段</h3>
        <div style="display: flex;">
            <section>
                <ul>
                    <li v-for="item in fieldsTypeList"
                        @click.stop="()=>triggerModifyModuleField(item)"
                        :key="item.id" style="cursor:pointer;padding-bottom: 10px;">
                        {{item.description}}
                    </li>
                </ul>
            </section>
            <section style="padding-left: 20px;">
                <div>
                    <div v-for="item in fieldsList" :key="item._id" style="padding-bottom: 10px;">
                        <span>{{item.name}}</span>
                        <div style="display: flex;">
                            <el-input :value="customDataValueMap[item.uuidKey]"
                                      @input="str=>changeValue(str,item)"></el-input>
                            <el-button
                                    @click="()=>triggerUpdateModuleField(item.uuidKey)"
                                    icon="el-icon-edit" circle style="margin-left: 10px;"></el-button>
                            <el-popconfirm
                                    title="确定？"
                                    @confirm="()=>deleteModuleField(item.id)"
                            >
                                <el-button >删除</el-button>
                                <el-button
                                        slot="reference"
                                        icon="el-icon-delete" circle style="margin-left: 10px;"></el-button>
                            </el-popconfirm>


                        </div>
                    </div>
                </div>
            </section>
        </div>


        <div>
            <el-button>返回</el-button>
            <el-button type="primary" @click="()=>updateSubmit()">提交</el-button>
        </div>


        <modukleFiekdModify ref="modukleFiekdModifyDailog" @refresh="()=>{}"></modukleFiekdModify>
    </div>
</template>
<script>
    import {getUrlParamNative,safeParseJson} from "../../../utils/utils";

    export default {
        components: {
            modukleFiekdModify: () => import("./modukleFiekdModify.vue")
        },
        data() {
            return {
                id: "",
                form: {
                    id: "",
                    companyId: "",
                    projectId: "",
                    boothNumber: "",
                    userName: "",
                    password: "",
                    website: "",
                    accountName: "",
                    company: "",
                    companyEn: "",
                    contact: "",
                    contactEn: "",
                    job: "",
                    jobEn: "",
                    portrait: "",
                    email: "",
                    phone: "",
                    mobilePhone: "",
                    tags: "",
                    country: "",
                    province: "",
                    city: "",
                    creator: "",
                    mendor: "",
                    updateTime: "",
                    createTime: "",
                    status: "",
                    remark: "",
                    hallNumber: "",
                    industry: "",
                    nature: "",
                    introduction: "",
                    confirmCode: "",
                    popular: "",
                    expo: "",
                    cpc: "",
                    acode: "",
                    video: "",
                    url: "",
                    videoPopular: "",
                    introductionEn: "",
                    companyAddress: "",
                    companyAddressEn: "",
                    agree: "",
                    onlineExpireTime: "",
                    collect: "",
                    likes: "",
                    beCollect: "",
                    beLikes: "",
                    top: "",
                    synTopExhibit: "",
                    addTime: "",
                    topOrderBy: "",
                    collectDemand: "",
                    collectPurchaser: "",
                    likesDemand: "",
                    likesPurchaser: "",

                },
                loginRules: {

                    id: [{required: false, trigger: 'blur', message: "id不能为空"}],

                    companyId: [{required: true, trigger: 'blur', message: "companyId不能为空"}],

                    projectId: [{required: true, trigger: 'blur', message: "projectId不能为空"}],

                    boothNumber: [{required: true, trigger: 'blur', message: "boothNumber不能为空"}],

                    userName: [{required: true, trigger: 'blur', message: "userName不能为空"}],

                    password: [{required: true, trigger: 'blur', message: "password不能为空"}],

                    website: [{required: true, trigger: 'blur', message: "website不能为空"}],

                    accountName: [{required: true, trigger: 'blur', message: "accountName不能为空"}],

                    company: [{required: true, trigger: 'blur', message: "company不能为空"}],

                    companyEn: [{required: true, trigger: 'blur', message: "companyEn不能为空"}],

                    contact: [{required: true, trigger: 'blur', message: "contact不能为空"}],

                    contactEn: [{required: true, trigger: 'blur', message: "contactEn不能为空"}],

                    job: [{required: true, trigger: 'blur', message: "job不能为空"}],

                    jobEn: [{required: true, trigger: 'blur', message: "jobEn不能为空"}],

                    portrait: [{required: true, trigger: 'blur', message: "portrait不能为空"}],

                    email: [{required: true, trigger: 'blur', message: "email不能为空"}],

                    phone: [{required: true, trigger: 'blur', message: "phone不能为空"}],

                    mobilePhone: [{required: true, trigger: 'blur', message: "mobilePhone不能为空"}],

                    tags: [{required: true, trigger: 'blur', message: "tags不能为空"}],

                    country: [{required: true, trigger: 'blur', message: "country不能为空"}],

                    province: [{required: true, trigger: 'blur', message: "province不能为空"}],

                    city: [{required: true, trigger: 'blur', message: "city不能为空"}],

                    creator: [{required: true, trigger: 'blur', message: "creator不能为空"}],

                    mendor: [{required: true, trigger: 'blur', message: "mendor不能为空"}],

                    // updateTime: [{required: true, trigger: 'blur', message: "updateTime不能为空"}],
                    //
                    // createTime: [{required: true, trigger: 'blur', message: "createTime不能为空"}],

                    status: [{required: true, trigger: 'blur', message: "status不能为空"}],

                    remark: [{required: true, trigger: 'blur', message: "remark不能为空"}],

                    hallNumber: [{required: true, trigger: 'blur', message: "hallNumber不能为空"}],

                    industry: [{required: true, trigger: 'blur', message: "industry不能为空"}],

                    nature: [{required: true, trigger: 'blur', message: "nature不能为空"}],

                    introduction: [{required: true, trigger: 'blur', message: "introduction不能为空"}],

                    confirmCode: [{required: true, trigger: 'blur', message: "confirmCode不能为空"}],

                    popular: [{required: true, trigger: 'blur', message: "popular不能为空"}],

                    expo: [{required: true, trigger: 'blur', message: "expo不能为空"}],

                    cpc: [{required: true, trigger: 'blur', message: "cpc不能为空"}],

                    acode: [{required: true, trigger: 'blur', message: "acode不能为空"}],

                    video: [{required: true, trigger: 'blur', message: "video不能为空"}],

                    url: [{required: true, trigger: 'blur', message: "url不能为空"}],

                    videoPopular: [{required: true, trigger: 'blur', message: "videoPopular不能为空"}],

                    introductionEn: [{required: true, trigger: 'blur', message: "introductionEn不能为空"}],

                    companyAddress: [{required: true, trigger: 'blur', message: "companyAddress不能为空"}],

                    companyAddressEn: [{required: true, trigger: 'blur', message: "companyAddressEn不能为空"}],

                    agree: [{required: true, trigger: 'blur', message: "agree不能为空"}],

                    onlineExpireTime: [{required: true, trigger: 'blur', message: "onlineExpireTime不能为空"}],

                    collect: [{required: true, trigger: 'blur', message: "collect不能为空"}],

                    likes: [{required: true, trigger: 'blur', message: "likes不能为空"}],

                    beCollect: [{required: true, trigger: 'blur', message: "beCollect不能为空"}],

                    beLikes: [{required: true, trigger: 'blur', message: "beLikes不能为空"}],

                    top: [{required: true, trigger: 'blur', message: "top不能为空"}],

                    synTopExhibit: [{required: true, trigger: 'blur', message: "synTopExhibit不能为空"}],

                    addTime: [{required: true, trigger: 'blur', message: "addTime不能为空"}],

                    topOrderBy: [{required: true, trigger: 'blur', message: "topOrderBy不能为空"}],

                    collectDemand: [{required: true, trigger: 'blur', message: "collectDemand不能为空"}],

                    collectPurchaser: [{required: true, trigger: 'blur', message: "collectPurchaser不能为空"}],

                    likesDemand: [{required: true, trigger: 'blur', message: "likesDemand不能为空"}],

                    likesPurchaser: [{required: true, trigger: 'blur', message: "likesPurchaser不能为空"}],


                },
                fieldsList: [],
                fieldsTypeList: [],
                customDataValueMap: {},//自定义的值
                customDataValueList: []
            }
        },
        mounted() {
            this.id = getUrlParamNative('id')
            this.ajaxfieldsTypeList();
            this.ajaxDetailOne()
            this.ajaxGetFieldsList();
            this.ajaxcustomDataValue()
        },
        methods: {
            changeValue(str, item) {
                this.customDataValueMap[item.uuidKey] = str
                // console.log('str',str, this.customDataValueMap)
                this.$forceUpdate();
            },
            triggerUpdateModuleField(uuidKey) {
                var _index = this.fieldsList.findIndex(item => item.uuidKey == uuidKey)
                var one = this.fieldsList[_index]
                var item = {
                    "name": "",
                    "uuidKey": "",
                    "description": "",
                    ...one,
                    id: one.id,
                    "moduleName": "exhibitor",
                }
                this.$refs['modukleFiekdModifyDailog'].init(item)
            },
            async ajaxfieldsTypeList() {
                var resuult = await axios.get(`/springboot6379/fieldType/listAll`).then(res => res.data).then(res => res.result)

                this.fieldsTypeList = resuult

            },
            async ajaxDetailOne() {
                var result = await axios.get(`/springboot6379/supplier/one?id=${this.id}`).then(res => res.data).then(res => res.result)
                this.form = result
            },
            async ajaxcustomDataValue() {
                var self = this;
                var result = await axios.get(`/springboot6379/moduleFieldData/listAll?supplierId=${this.id}`).then(res => res.data).then(res => res.result)
                this.customDataValueList = safeParseJson(result.jsonValue)||[]
                if (this.customDataValueList) {
                    this.customDataValueList.map(item => {
                        this.customDataValueMap[item.uuidKey] = item.value
                    })
                }

                this.$forceUpdate();

            },
            async deleteModuleField(id){
                var result = await axios.get(`/springboot6379/moduleField/delete?id=`+id).then(res => res.data).then(res => res.result)

            },
            async ajaxGetFieldsList() {
                var result = await axios.get(`/springboot6379/moduleField/listAll?moduleName=exhibitor`).then(res => res.data).then(res => res.result)
                if (result) {
                    result = result.map(item => {
                        item._id = item.uuidKey || uuid()
                        return item
                    })
                }
                this.fieldsList = result
                console.log("fieldsList resuot", result)
            },
            /*
            * ajax updateBatch value的list
            * */
            async submitCustomDataValue() {
                var customDataValueList = [];
                var self = this;
                this.fieldsList.map(item => {
                    var value = this.customDataValueMap[item.uuidKey]
                    var _indexInCustomDataValueList = this.$data.customDataValueList.findIndex(_item => _item.uuidKey == item.uuidKey)
                    var sourceItem = this.$data.customDataValueList[_indexInCustomDataValueList] || {}
                    customDataValueList.push({
                            id: "",
                            fieldType: item.fieldType,
                            moduleName: item.moduleName,
                            supplierId: self.id,
                            uuidKey: item.uuidKey,
                            ...sourceItem,
                            value: value || ''
                        }
                    )
                    return item
                })

                var result = await axios.post(`/springboot6379/moduleFieldData/updateBatchWithJson`, {
                    customDataValueList,
                    userId:this.$data.id,
                    userType:"exhibitor",
                }).then(res => res.data).then(res => res.result)
                this.customDataValue = result || {}
            },
            async updateSubmit() {
                this.$refs['form'].validate(async (isyes) => {
                    if (isyes) {
                        var _params = this.form
                        console.log("[get]  /supplier/add")
                        console.log('参数', JSON.stringify(_params))
                        var url = this.form.id ? '/springboot6379/supplier/update' : '/springboot6379/supplier/add'
                        var result = await axios.post(url, _params).then(res => res.data)
                        console.log("结果", result)
                        this.dialogVisible = false;

                        //保存自定义字段的values
                        await this.submitCustomDataValue()

                        this.$emit('refresh')
                    }
                })
            },
            async triggerModifyModuleField(moduleField) {
                var item = {
                    "name": "",
                    "uuidKey": "",
                    "description": "",
                    ...moduleField,
                    id: "",
                    "moduleName": "exhibitor",
                    "fieldType": moduleField.id + '',
                }
                this.$refs['modukleFiekdModifyDailog'].init(item)

            }
        }
    }
</script>